<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>TodoList案例</title>
	<script type="text/javascript" src="js/vue-2.6.12.js"></script>
	<style type="text/css">
      #app {
        width: 350px;
        margin: 50px auto;
      }

      li {
        list-style-type: none;
      }

      ul {
        padding-left: 0;
      }

      .add {
        width: 200px;
        height: 20px;
        margin-right: 10px;
      }
      /* 当备忘项勾选完成后，使用该样式描述 */
      .finish {
        color: #ccc;
        text-decoration: line-through;
      }

      .span1 {
        color: skyblue;
      }
	</style>
</head>

<body>
<div id="app">
	
	<h1>任务列表</h1>
	<p>任务总数：{{ arr.length }}；还有：{{ notFinished }} 未完成；【<span>完成</span>】</p>
	<ul>
<!--		<li  v-for="(item,index) in arr" :key="index" :class="{finish:item.bol}" > <input  type="checkbox"  :value="index" v-model="check"  v-on:change="finish"  > {{item.des}}</li>-->

<!--		v-model 在绑定 checkbox时 如果标签没有value属性 默认绑定checked属性的值 -->
		<li  v-for="(item,index) in arr" :key="index" :class="{finish:item.bol}" > <input  type="checkbox"  v-model="item.bol"  > {{item.des}}</li>
	</ul>

	<input type="text" class="add" v-model="newData" >
	<button @click='add()'>添加</button>
</div>
</body>

</html>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      newData:"",
      check:[],
      arr: [
        // 每条数据中应该有数据的内容，和 数据的状态
        { des: '设计产品原型', bol: false, edit: false },
        { des: 'UI设计', bol: false, edit: false },
        { des: '编写页面代码', bol: false, edit: false },
        { des: '编写js代码', bol: false, edit: false },
      ],
      msg: ''
    },
    methods: {
      add(){
        
        if (this.newData.length>0){

          let parse = JSON.parse(JSON.stringify({des: this.newData, bol: false, edit: false}));
        
          this.arr.push(parse);
        }
        this.newData="";
      },
      
      finish(){

        for (let i = 0; i < this.arr.length; i++) {
          this.arr[i].bol=false;
        }
        
        for (let i = 0; i <this.check.length; i++) {
          this.arr[this.check[i]].bol=true;
        }
        
      }

    },
    computed:{
      notFinished(){
        
        return this.arr.reduce((preValue,product)=>{
          
          return preValue+ (product.bol?0:1);
          
        },0)
        
      },
    
    
    }
  });
</script>